<template>
  <div class="tags">
    <div class="tag-group">
      <el-tag
        @close="handleClose(item,index)"
        @click="changeMenu(item)"
        v-for="(item,index) in tags"
        :key="item.label"
        :effect="$route.name === item.name ? 'dark':'plain'"
         :closable="item.name !=='home'"
      >
        {{ item.label }}
      </el-tag>
    </div>
  </div>
</template>
<style>
.el-tag {
    margin-right: 10px;
}



</style>

<script>
import { mapState ,mapMutations } from 'vuex';
export default {
    name:'CommonTag',
    data(){
        return {

        }
    },
    computed:{
        ...mapState({
            tags:state => state.tab.tabList
        })
    },
    methods:{
        ...mapMutations(['delTag']),
        // 点击跳转
        changeMenu(item){
            this.$router.push({name:item.name})
        },
        // 点击删除
        handleClose(item,index){
            this.delTag(item)
            const length=this.tags.length
            // console.log(item);
            if(item.name !== this.$route.name){
                return
            }
            if(index === length){
                this.$router.push({
                    name:this.tags[index-1].name
                })
            }else{
                this.$router.push({
                    name:this.tags[index].name
                })
            }

        }
    }


}
</script>